<template>
    <div class="border-content" :style="{width:width,height:height}">
        <div class="line-bor-left line-bor">
            <div class="line-g"></div>
            <div class="line-b">
                <span class="line-b-i b-top"></span>
                <span class="line-b-i b-bot"></span>
            </div>
        </div>
        <div class="line-bor-right line-bor">
            <div class="line-g"></div>
            <div class="line-b">
                <span class="line-b-i b-top"></span>
                <span class="line-b-i b-bot"></span>
            </div>
        </div>
        <div class="bor-title">
            <h2 :class="tabIndex==1?'act':''" :style="{minWidth:minw}" @click="conTab(1)">
                <div class="tit-left"></div>
                <img style="width: 46px;height: 46px;" :src="imgUrl">
                <span>{{title}}</span>
                <div class="tit-right"></div>
            </h2>
            <h2
                :class="tabIndex==2?'act':''"
                :style="{minWidth:minw}"
                v-if="title2"
                @click="conTab(2)"
            >
                <div class="tit-left"></div>
                <img style="width: 46px;height: 46px;" :src="imgUrl2">
                <span>{{title2}}</span>
                <div class="tit-right"></div>
            </h2>
        </div>
        <div class="content-box">
            <slot name="contentbox1" v-if="tabIndex == 1"></slot>
            <slot name="contentbox2" v-if="tabIndex == 2"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "slotcontent",
    /* 外部引入的值 */
    props: {
        title: {
            type: String,
            default: "内容框组件"
        },
        imgUrl: {
            type: String,
            default: "../"
        },
        title2: {
            type: String,
            default: ""
        },
        imgUrl2: {
            type: String,
            default: "../"
        },
        width: {
            type: String,
            default: "500px"
        },
        height: {
            type: String,
            default: "600px"
        },
        minw: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            tabIndex: 1
        };
    },
    mounted() {},
    methods: {
        conTab(val) {
            console.log(val);
            this.tabIndex = val;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bor-title {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    h2 {
        &.act {
            span {
                color: rgba(255, 255, 255, 1);
            }
            img {
                -webkit-filter: initial;
                -moz-filter: initial;
                -ms-filter: initial;
                -o-filter: initial;
                filter: initial;
                filter: initial;
                opacity: 1; //通过改变透明度来调节灰色的程度
            }
        }
        span {
            color: rgba(255, 255, 255, 0.23);
        }
        img {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            opacity: 0.7; //通过改变透明度来调节灰色的程度
        }
    }
}
</style>
